<template>
  <div class="share-con">
    <div class="header flex h-[40px] items-center">
      <div
        class="logo w-[200px] flex justify-center text-primaryColor text-[18px] cursor-pointer"
        @click="handleToHome"
      >
        {{ systemInfo.companyName || '企业网盘' }}
      </div>
      <div
        class="title flex-1 h-[40px] flex items-center pl-2 text-[16px] font-bold text-[#aaa]"
      >
        {{ shareInfo.title }}
      </div>
      <div class="qr-code w-[40px] h-[40px] flex justify-center items-center">
        <SvgIcon icon="qrcode-1-copy"></SvgIcon>
      </div>

      <n-dropdown
        trigger="click"
        :options="shareHeaderMenus"
        placement="bottom-start"
        @select="handleHeaderMenuSelect"
        :render-label="renderMenuLabel"
        :z-index="1000"
      >
        <div class="menu w-[40px] h-[40px] flex justify-center items-center">
          <SvgIcon icon="mianbaoxie-xian"></SvgIcon>
        </div>
      </n-dropdown>
    </div>

    <div
      class="main py-2 px-10 bg-[#f0f2f5] flex justify-center items-center"
      v-if="shareInfo.code === 1"
    >
      <div class="code-panel flex flex-col items-center pt-3">
        <h5 class="text-center">提取密码</h5>
        <n-divider />
        <n-input
          class="!w-[300px]"
          placeholder="请输入提取码"
          v-model:value="pageInfo.code"
        ></n-input>
        <n-button
          class="!w-[300px] mt-4"
          type="primary"
          @click="handleToValidCode"
        >
          确认
        </n-button>
      </div>
    </div>

    <div class="main py-2 px-10 bg-[#f0f2f5]" v-else>
      <div class="content bg-[#fff] h-full">
        <n-split
          direction="horizontal"
          style="height: 100%"
          :default-size="1"
          :max="1"
          :min="0"
        >
          <template #1>
            <n-split
              direction="horizontal"
              style="height: 100%"
              :default-size="0.8"
              :max="1"
              :min="0.7"
            >
              <template #1>
                <ShareExplorer
                  :shareId="route.query.shareId as string"
                ></ShareExplorer>
              </template>
              <template #2>
                <!-- 分享人信息 -->
                <div
                  class="avator h-[180px] flex flex-col justify-center items-center"
                >
                  <n-avatar
                    round
                    :size="100"
                    :src="renderAvatorSrc(shareInfo.User.avator)"
                  />
                  <div class="mt-2">
                    {{ shareInfo.User.username }}
                    <span class="gray">的共享</span>
                  </div>
                </div>
                <n-divider class="!my-2" />
                <n-grid
                  x-gap="12"
                  y-gap="12"
                  :cols="3"
                  class="pl-2 text-[13px] desc-panel"
                >
                  <n-gi :span="1" class="gray text-center"> 标题： </n-gi>
                  <n-gi :span="2"> {{ shareInfo.title }} </n-gi>
                  <n-gi :span="1" class="gray text-center"> 时间： </n-gi>
                  <n-gi :span="2">
                    {{ formatTime(shareInfo.createTime) }}
                  </n-gi>
                  <n-gi :span="1" class="gray text-center"> 大小： </n-gi>
                  <n-gi :span="2"> 0B </n-gi>
                  <n-gi :span="1" class="gray text-center"> 浏览： </n-gi>
                  <n-gi :span="2"> {{ shareInfo.numDownload }} </n-gi>
                  <n-gi :span="1" class="gray text-center"> 下载： </n-gi>
                  <n-gi :span="2"> {{ shareInfo.numDownload }} </n-gi>
                </n-grid>
              </template>
            </n-split>
          </template>
        </n-split>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useMessage } from 'naive-ui'
import {
  fullScreen,
  renderAvatorSrc,
  renderDropLabel
} from '@/utils/commonBusiness'
import { useLogout } from '@/hooks/useLogout'
import type { IndexObj } from '@/types/commom'
import { useSystemInfo } from '@/hooks/useSystemInfo'
import { getLinkShareById } from '@/api/share'
import { formatTime } from '@/utils'
import { getLinkSourceByPage } from '@/api/source'
import userExplorerStore from '@/stores/modules/explorer'
import ShareExplorer from './components/ShareExplorer.vue'

const { handleLogout } = useLogout()

const { systemInfo } = useSystemInfo()
const explorerStore = userExplorerStore()
const message = useMessage()

const route = useRoute()
const router = useRouter()

const shareHeaderMenus = ref([
  {
    key: 'save-to-pan',
    label: '保存到网盘',
    myIcon: 'baocundaowangpan'
  },
  {
    key: 'exit',
    label: '退出',
    myIcon: 'tuichudenglu'
  },
  {
    key: 'full-screen',
    label: '全屏',
    myIcon: 'jujiao'
  }
])

const renderMenuLabel = (option: IndexObj) => {
  return renderDropLabel(option.myIcon, option.label)
}

const handleHeaderMenuSelect = (key: string) => {
  if (key === 'save-to-pan') {
    // 保存当前分享文件到网盘
  } else if (key === 'exit') {
    // 退出登录
    handleLogout()
  } else if (key === 'full-screen') {
    fullScreen()
  }
}

const handleToHome = () => {
  router.push({
    name: 'home'
  })
}

// ========================= 左侧分享树形菜单相关=======================================
const shareInfo = reactive<any>({
  id: '',
  url: '',
  code: 0,
  title: '',
  openDeadLine: '0',
  deadline: Date.now(),
  isLimitDownloadCnt: '0',
  numView: 0,
  numDownload: 0,
  createTime: '',
  path: '',
  User: {
    id: '',
    username: '',
    avator: ''
  },
  sourceId: ''
})

// 根据ID获取外链分享详情
const loadShareInfo = (shareId: string) => {
  getLinkShareById({ shareId })
    .then((res) => {
      const {
        id,
        title,
        code,
        User,
        createTime,
        numDownload,
        numView,
        sourceId
      } = res.data
      shareInfo.id = id
      shareInfo.title = title
      shareInfo.code = +code
      shareInfo.User = User
      shareInfo.createTime = createTime
      shareInfo.numDownload = numDownload
      shareInfo.numView = numView
      shareInfo.sourceId = sourceId
      // 验证一下提取码
      if (explorerStore.linkShareCode !== '') {
        getLinkSourceByPage({
          page: pageInfo.page,
          pageSize: pageInfo.pageSize,
          filename: pageInfo.filename,
          code: explorerStore.linkShareCode,
          shareId: route.query.shareId as string,
          parentId: shareInfo.sourceId
        })
          .then((res) => {
            if (res.data.curSource) {
              // 验证通过
              shareInfo.code = 0
            }
          })
          .catch(console.error)
      }
    })
    .catch(console.error)
}

const pageInfo = reactive({
  page: 1,
  pageSize: 500,
  filename: '',
  code: ''
})

// 验证提取码
const handleToValidCode = () => {
  getLinkSourceByPage({
    page: pageInfo.page,
    pageSize: pageInfo.pageSize,
    filename: pageInfo.filename,
    code: pageInfo.code,
    shareId: route.query.shareId as string,
    parentId: shareInfo.sourceId
  })
    .then((res) => {
      if (res.data.curSource) {
        shareInfo.code = 0
        // 保留验证码到本地
        explorerStore.setLinkShareCode(pageInfo.code)
      } else {
        message.error('提取码错误')
      }
    })
    .catch(console.error)
}

onMounted(() => {
  loadShareInfo(route.query.shareId as string)
})
</script>

<style scoped lang="scss">
.share-con {
  .code-panel {
    width: 350px;
    height: 250px;
    background-color: #fff;
    border-radius: 4px;
    // margin: 300px 0;
  }

  .title,
  .qr-code,
  .menu {
    border-left: 1px solid #eee;
  }

  .qr-code,
  .menu {
    cursor: pointer;

    &:hover {
      background-color: #eee;
    }
  }

  .main {
    height: calc(100vh - 40px);
  }

  .gray {
    color: #999;
  }
}
</style>
